<template>
  <div>
  
  <div class="backImg">
    <div class="backColor">
    </div>
    <HomeHeader></HomeHeader>
    <HomeContent></HomeContent>
    <HomeFotter></HomeFotter>
  </div>
</div>
</template>

<script>
  import HomeHeader from '../Home/Navigation.vue'
  import HomeContent from '../Home/Content.vue'
  import HomeFotter from '../Home/Fotter.vue'
  export default {
      name:'Home',
      components:{
        HomeHeader,
        HomeContent,
        HomeFotter
      },
      data() {
        return {
          
        }
      },
  }

</script>

<style lang='less' scope>
  .backImg{
    height: 721px;
    width: 100%;
    background-size: cover;
    background-image: url(../../assets/Img/background.jpg);
    z-index: 0;
  }
  .backColor{
    position: absolute;
    width: 100%;
    height: 721px;
    background-color:	HotPink;
    opacity: 20%;
    z-index: 1;
  }
</style>